<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<link rel="shortcut icon" href="images/img/icon_1.ico">
		<link rel="stylesheet" type="text/css" href="css/shopping_car.css"/>
		<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
		<script src="js/carousel.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.11.0.js"></script>
		<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/wySilder.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="web">
			<!--头部-->
			<header>
				<div class="header_wrap">
					<div class="meizu_header clearfix">
						<div class="logo_warp">
							<a href="index.html" class="iconfont-link"><i class="iconfont icon-meizu"></i></a>
						</div>
						<!--导航-->
						<ul class="schedule">
							<li class="active">购物车</li>
							<li>确认订单</li>
							<li>在线支付</li>
							<li>完成</li>
						</ul>
						<ul class="header-right">
							<li><a href="#">我的订单</a></li>
							<li class="especially"><a href="#" class="especially_1">用户6254..的商城</a>
								<ul class="sec-menu">
									<li>
										<a href="#">地址管理</a>
									</li>
									<li>
										<a href="#">我的收藏</a>
									</li>
									<li>
										<a href="#">我的回购券</a>
									</li>
									<li>
										<a href="#">问题反馈</a>
									</li>
									<li>
										<a href="#" class="exc">退出</a>
									</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
			</header>
			<div class="line"></div>
			<!--内容-->
			<div class="car">
				<div class="cart-login-tips" id="cartlogintips">
			        您还没有登录！登录后可显示您账号中已加入的商品哦~
			        <a class="login_tips" href="#">
			            去登录
			        </a>
    			</div>
    			<div class="car_main">
    				<div class="car_menu">
	    				<table class="car_header">
	    					<tr>
	    						<td class="select">
	    							<div class="choose">
	    								<input type="checkbox" name="gou" id="gou" value="" />
	    								<label class="checked_box iconfont" for="gou"></label>
	    									<label for="gou">
	    									全选
	    								</label>
	    							</div>
	    						</td>
	    						<td class="merchandise">商品</td>
	    						<td class="price">单价(元)</td>
	    						<td class="num">数量</td>
	    						<td class="total">小计(元)</td>
	    						<td class="ctrl">操作</td>
	    					</tr>
	    				</table>
    					<ul class="car_menu_main">
    						<li>
    							<div class="select">
    								<input type="checkbox" name="gou" id="gou_1" value="" />
    								<label class="checked_box  iconfont" for="gou_1"></label>
    								<label for="gou_1">
    									魅族
    								</label>
    							</div>
    							<table class="car_menu_body">
    								<tr class="car-product">
    									<td class="select">
    										<input type="checkbox" name="gou" id="gou_2" value="" />
    								<label class="checked_box  iconfont" for="gou_2"></label>
    										<a href="#" class="merchandise_wrap">
    											<img src="images/11.png"/>
    										</a>
    									</td>
    									<td class="merchandise">
    										<a href="#" class="merchandise_name">
    											<p>魅蓝6</p>
    											<span>全网通公开版 香槟金 2GB+16GB</span>
    										</a>
    									</td>
    									<td class="price">
    										<span>￥699.00</span>
    									</td>
    									<td class="num">
    										<div class="num_wrap clearfix" id="num">
    											<button class="reduce fl iconfont"></button>
    											<div class="text_num fl">
    												<input type="text" name="" id="" value="" placeholder="1" />
    											</div>
    											<button class="add fl iconfont"></button>
    										</div>
    									</td>
    									<td class="total">
    										<span class="total_num">￥699.00</span>
    									</td>
    									<td class="ctrl">
    										<div class="ctrl_wrap">
    											<a href="#" id="del" class="iconfont">
    												<i class="iconfont icon-cross"></i>
    											</a>
    										</div>
    									</td>
    								</tr>
    							</table>
    						</li>
    					</ul>
    					<div class="car_footer clearfix">
    						<div class="car_footer_left fl">
    							<div class="select_2">
    								<input type="checkbox" name="gou" id="gou_3" value="" />
    								<label class="checked_box  iconfont" for="gou_3"></label>
    								<span><a href="#">全选</a></span>
    							</div>
    							<span class="del"><a href="#">删除选择的商品</a></span>
    							<div class="text_wrap">
    								<p class="">共 <span>1</span> 件商品，已选择 <span>1</span> 件</p>
    							</div>
    							
    						</div>
    						<div class="car_footer_right fr">
    							<div class="text_wrap_price">
    								<p>已优惠 <span class="discounts">0.00</span> 元，合计(不含运费):</p>
    								<span>￥699.00</span>
    								<a class="settle-accounts" href="#">
    									去结算
    								</a>
    							</div>
    						</div>
    					</div>
    				</div>
    			</div>
			</div>
			<!--尾部-->
			<footer>
				<div class="footer_menu">
					<ul>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon1.jpg"/>
							</a>
							<a href="#">顺丰快递</a>
						</li>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon2.jpg"/>
							</a>
							<a href="#">1年免费保修</a>
						</li>
					</ul>
					<ul>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon3.jpg"/>
							</a>
							<a href="#">100+城市次日送达</a>
						</li>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon4.jpg"/>
							</a>
							<a href="#">2300+线下体验店</a>
						</li>
					</ul>
					<ul>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon5.jpg"/>
							</a>
							<a href="#">7天无理由退款</a>
						</li>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon6.jpg"/>
							</a>
							<a href="#">远程支持服务</a>
						</li>
					</ul>
					<ul>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon7.jpg"/>
							</a>
							<a href="#">15天换货保障</a>
						</li>
						<li>
							<a class="footer_icon" href="#">
								<img src="images/footer_icon8.jpg"/>
							</a>
							<a href="#">上门快修</a>
						</li>
					</ul>
					<div class="right_f">
						<p>24小时全国服务热线</p>
						<h4>400-788-3333</h4>
						<a class="service_down" href="#">
							<div class="service_down_icon">
								<img src="images/service_d1.png"/>	
							</div>
							<p>在线客服</p>
						</a>
					</div>
					<div class="clear"></div>
				</div>
				<div class="down_menu">
					<ol class="clearfix">
						<li>
							<a href="#">了解魅族</a>
						</li>
						<li>
							<a href="#">加入我们</a>
						</li>
						<li>
							<a href="#">联系我们</a>
						</li>
						<li>
							<a href="#">Flyme</a>
						</li>
						<li>
							<a href="#">魅族社区</a>
						</li>
						<li>
							<a href="#">天猫旗舰店</a>
						</li>
						<li>
							<a href="#">问题反馈</a>
						</li>
						<li>
							<a href="#">线上销售授权名单公示</a>
						</li>
					</ol>
				</div>
				<div class="down_wen">
					<p>&copy;2017 Meizu Telecom Equipment Co.,Ltd.All rights reserved.
						<a href="#">粤ICP备1300360号-2</a>
						<a href="#">粤ICP备1300360号-2</a>
						<a href="#">营业执照</a>
						<a href="#">法律声明</a>
					粤公网安备 44049102496009 号
					</p>
					<div class="lianxi clearfix">
						<div class="lianxi_1">
							<a href="#"></a>
						</div>
						<div class="lianxi_2">
							<a href="#"></a>
						</div>
						<div class="lianxi_3">
							<a href="#"></a>
						</div>
					</div>
					<div class="share">
						<a href="#" class="icon-link"><i class="iconfont icon-weibo"></i></a>
						<a href="#" class="icon-link"><i class="iconfont icon-weixin"></i></a>
						<a href="#" class="icon-link"><i class="iconfont icon-qqkongjian"></i></a>
						<div class="clear"></div>
					</div>
				</div>
			</footer>
		</div>
	</body>
</html>
<script type="text/javascript">
	var num = $("#num");
	function numChange(n){
		var x = num.val();
		var danjia = $(".price-col").html();
		var p = $('.total-price');
		var price = p.text();
		console.log(num);
		if(n == 0){
			x--;
			if(x<=1){
				x=1;
			}
			num.val(x);
			p.text(danjia*x);
		}
		if(n == 1){ 
			x++;
			num.val(x);
			p.text(danjia*x);
		}
	}
</script>